<template>
	<view class="community-container">

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="Search" />
			</view>
		</view>

		<!-- 今日热榜（轮播效果） -->
		<view class="hot-topic-card" @click="gotoHotTop()">
			<swiper class="hot-topic-swiper" vertical autoplay interval="3000" circular duration="500"
				easing-function="ease-in-out">
				<swiper-item v-for="(hotTopic, index) in hotTopics" :key="index">
					<view class="hot-topic-item">
						<view class="hot-topic-header">
							<text class="hot-title">今日热榜</text>
							<image class="hot-icon" 
							src="/static/common/fire.png"
							mode="aspectFit"
							></image>
						</view>
						<view class="hot-topic-content">
							<text>{{hotTopic.content}}</text>
							<text class="reply-count">{{hotTopic.replies}}条回复</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分类标签 -->
		<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false">
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: activeTab === index}"
					@click="switchTab(index)">
					{{tab}}
				</view>
			</view>
		</scroll-view>

		<!-- 帖子列表 -->
		<view class="post-list" >
			<view v-for="(post, index) in postList" :key="index" class="post-card" :style="getCardStyle(index)"
				@touchstart="handleTouchStart(index)" @touchend="handleTouchEnd(index)"
				@click="gotoPostInfo(post)">
				<view class="post-header">
					<image class="avatar" :src="post.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="nickname">{{post.nickname}}</text>
						<text class="time">{{post.time}}</text>
					</view>
				</view>

				<view class="post-content">
					<text>{{post.content}}</text>
				</view>

				<view class="post-footer">
					<text class="category"># {{post.category}}</text>

					<text class="views">{{post.views}}次围观</text>
					<view class="interactions">
						<view class="interaction-item">
							<uni-icons type="hand-up" size="16" color="#666"></uni-icons>
							<text>{{post.likes}}</text>
						</view>
						<view class="interaction-item">
							<uni-icons type="chat" size="16" color="#666"></uni-icons>
							<text>{{post.comments}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 底部导航 -->
		<TabBar :initial-tab="0" active-color="#7894ec" inactive-color="#666" @tabChange="handleTabChange" ref="tabBarRef" />


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	
	const tabBarRef = ref(null);

	const tabs = ref(['最新', '新鲜事', '日常投稿', '二手闲置', '树洞', '表白']);
	const activeTab = ref(0);
	const currentTab = ref(0);
	const activeCard = ref(null);
	const touchStartX = ref(0);

	// 今日热榜数据（轮播内容）
	const hotTopics = ref([{
			content: '有没有可以8月一起去武汉看*哈演唱会的呀?',
			replies: 1
		},
		{
			content: '明天图书馆主楼闭馆去哪里背书啊？综合楼几层是专门给背书的啊',
			replies: 3
		},
		{
			content: '问问大家，有没有好用的去黑头产品？一搜全是广😅',
			replies: 5
		}
	]);

	// 使用在线头像资源
	const postList = ref([{
			avatar: '/static/avatar/1.jpg',
			nickname: 'momo123456',
			time: '11小时前',
			content: '明天图书馆主楼闭馆去哪里背书啊？综合楼几层是专门给背书的啊',
			category: '日常投稿',
			views: 985,
			likes: 0,
			comments: 3
		},
		{
			avatar: '/static/avatar/2.jpg',
			nickname: 'a',
			time: '14小时前',
			content: '问问大家，有没有好用的去黑头产品？一搜全是广😅',
			category: '日常投稿',
			views: 735,
			likes: 0,
			comments: 3
		},
		{
			avatar: '/static/avatar/3.jpg',
			nickname: '神秘同学1560562221',
			time: '15小时前',
			content: '有没有可以8月一起去武汉看*哈演唱会的呀？',
			category: '日常投稿',
			views: 970,
			likes: 1,
			comments: 6
		},
		{
			avatar: '/static/avatar/4.jpg',
			nickname: '一点点',
			time: '22小时前',
			content: '求学校**快递',
			category: '二手闲置',
			views: 490,
			likes: 0,
			comments: 2
		},
		{
			avatar: '/static/avatar/5.jpg',
			nickname: '神秘111',
			time: '22小时前',
			content: '求学校**快递',
			category: '二手闲置',
			views: 490,
			likes: 0,
			comments: 2
		}
	]);

	const switchTab = (index) => {
		activeTab.value = index;
	};

	const handlePost = () => {
		uni.navigateTo({
			url: '/pages/post/create'
		});
	};

	const handleTouchStart = (index) => {
		activeCard.value = index;
		touchStartX.value = event.changedTouches[0].clientX;
	};

	const handleTouchEnd = (index) => {
		const touchEndX = event.changedTouches[0].clientX;
		const deltaX = touchEndX - touchStartX.value;

		if (Math.abs(deltaX) > 30) {
			// 可以在这里添加滑动后的逻辑
		}

		setTimeout(() => {
			activeCard.value = null;
		}, 300);
	};

	const getCardStyle = (index) => {
		if (activeCard.value === index) {
			return {
				transform: 'translateY(-5px)',
				boxShadow: '0 10px 20px rgba(0,0,0,0.15)'
			};
		}
		return {
			transform: 'translateY(0)',
			boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
		};
	};

	const handleTabChange = (index) => {
		console.log('Tab changed to:', index, tabBarRef, tabBarRef.value);
		// 可以做跳转后的其他操作
	};

	//	跳转到热榜
	const gotoHotTop= ()=>{
		uni.navigateTo({
			url: '/pages_index/hotTop/hotTop'
		})
	};
	
	//	跳转到帖子详情
	const gotoPostInfo= ()=>{
		uni.navigateTo({
			url: '/pages_index/postInfo/postInfo'
		})
	};
	
	onLoad(() => {
		// 可以在这里添加页面加载时的逻辑
	});
	onPullDownRefresh(() => {
		uni.showLoading({
			title: '刷新中...'
		})
		setTimeout(() => {
			uni.hideLoading()
		}, 1500)
	});
	onReachBottom(() => {
		uni.showLoading({
			title: '加载中...'
		})
		setTimeout(() => {
			uni.hideLoading()
			postList.value = [...postList.value, ...postList.value]
		}, 1500)
	});
</script>

<style lang="scss" scoped>
	.community-container {
		padding: 20rpx;
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.search-bar {
		margin-bottom: 20rpx;

		.search-box {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 20px;
			padding: 8px 15px;

			.search-icon {
				margin-right: 8px;
				font-size: 16px;
			}

			.search-input {
				flex: 1;
				font-size: 14px;
				background-color: transparent;
			}
		}
	}

	.hot-topic-card {
		background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 154, 158, 0.2);
		overflow: hidden;
		height: 180rpx;

		.hot-topic-swiper {
			height: 100%;

			.hot-topic-item {
				padding: 20rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.hot-topic-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.hot-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}

				.hot-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.hot-topic-content {
				font-size: 28rpx;
				color: #fff;
				line-height: 1.5;
				display: flex;
				flex-direction: column;

				.reply-count {
					font-size: 24rpx;
					margin-top: 10rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.tab-scroll {
		white-space: nowrap;
		margin-bottom: 30rpx;

		.tabs {
			display: inline-flex;

			.tab-item {
				padding: 15rpx 30rpx;
				font-size: 28rpx;
				color: #666;
				position: relative;
				transition: all 0.3s ease;

				&.active {
					color: #007AFF;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 5rpx;
						left: 30rpx;
						right: 30rpx;
						height: 6rpx;
						background-color: #007AFF;
						border-radius: 3rpx;
					}
				}
			}
		}
	}

	.post-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.post-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 25rpx;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;

		.post-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				border: 2rpx solid #f5f5f5;
			}

			.user-info {
				display: flex;
				flex-direction: column;

				.nickname {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 5rpx;
				}

				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.post-content {
			font-size: 30rpx;
			line-height: 1.6;
			margin-bottom: 25rpx;
			color: #333;
		}

		.post-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;

			.category {
				margin-right: 15rpx;
				background-color: #f6f4f7;
				border-radius: 25rpx;
				padding: 10rpx 15rpx;
			}

			.views {
				flex: 1;
			}

			.interactions {
				display: flex;
				align-items: center;

				.interaction-item {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}


	/* 响应式调整 */
	@media (min-width: 768px) {
		.community-container {
			max-width: 750px;
			margin: 0 auto;
		}
	}
</style>